<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专业简历 - 张三</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .skill-bar {
            transition: width 1s ease-in-out;
        }
        .timeline-dot {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
            }
        }
        .section-title {
            position: relative;
            padding-bottom: 1rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="md:w-2/3">
                    <h1 class="text-5xl md:text-6xl font-bold mb-4">张三</h1>
                    <p class="text-2xl mb-6 opacity-90">高级软件工程师 · 全栈开发专家</p>
                    <div class="flex flex-wrap gap-4 mb-8">
                        <span class="flex items-center gap-2"><i class="fas fa-phone"></i> 138-0000-0000</span>
                        <span class="flex items-center gap-2"><i class="fas fa-envelope"></i> zhangsan@email.com</span>
                        <span class="flex items-center gap-2"><i class="fas fa-map-marker-alt"></i> 北京市朝阳区</span>
                    </div>
                    <p class="text-lg leading-relaxed opacity-90">
                        拥有8年软件开发经验的全栈工程师，专注于构建高性能、可扩展的企业级应用。
                        擅长前后端技术栈，具备优秀的架构设计能力和团队协作精神。
                    </p>
                </div>
                <div class="md:w-1/3 mt-8 md:mt-0 flex justify-center">
                    <div class="w-48 h-48 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <i class="fas fa-user-tie text-6xl"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto px-6 py-12">
        <!-- Skills Overview -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">技能概览</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white rounded-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-code text-3xl text-gradient mr-4"></i>
                        <h3 class="text-xl font-semibold">前端开发</h3>
                    </div>
                    <div class="space-y-3">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm">React/Vue</span>
                                <span class="text-sm text-gray-600">95%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="skill-bar bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 95%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm">TypeScript</span>
                                <span class="text-sm text-gray-600">90%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="skill-bar bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 90%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-server text-3xl text-gradient mr-4"></i>
                        <h3 class="text-xl font-semibold">后端开发</h3>
                    </div>
                    <div class="space-y-3">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm">Node.js/Java</span>
                                <span class="text-sm text-gray-600">88%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="skill-bar bg-gradient-to-r from-blue-500 to-teal-500 h-2 rounded-full" style="width: 88%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm">数据库设计</span>
                                <span class="text-sm text-gray-600">85%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="skill-bar bg-gradient-to-r from-blue-500 to-teal-500 h-2 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-cloud text-3xl text-gradient mr-4"></i>
                        <h3 class="text-xl font-semibold">DevOps</h3>
                    </div>
                    <div class="space-y-3">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm">Docker/K8s</span>
                                <span class="text-sm text-gray-600">82%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="skill-bar bg-gradient-to-r from-green-500 to-blue-500 h-2 rounded-full" style="width: 82%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm">CI/CD</span>
                                <span class="text-sm text-gray-600">80%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="skill-bar bg-gradient-to-r from-green-500 to-blue-500 h-2 rounded-full" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Work Experience Timeline -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">工作经历</h2>
            <div class="relative">
                <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-300"></div>
                
                <div class="relative mb-8">
                    <div class="absolute left-8 w-4 h-4 bg-purple-600 rounded-full timeline-dot -translate-x-1/2"></div>
                    <div class="ml-20 bg-white rounded-lg p-6 card-hover">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h3 class="text-xl font-semibold">高级软件工程师</h3>
                                <p class="text-purple-600">某知名互联网公司</p>
                            </div>
                            <span class="text-gray-500">2021.03 - 至今</span>
                        </div>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>负责核心业务系统的架构设计与优化，提升系统性能40%</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>带领5人团队完成微服务改造，实现服务高可用</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>推动前端工程化建设，建立组件库和自动化测试体系</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="relative mb-8">
                    <div class="absolute left-8 w-4 h-4 bg-purple-600 rounded-full timeline-dot -translate-x-1/2"></div>
                    <div class="ml-20 bg-white rounded-lg p-6 card-hover">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h3 class="text-xl font-semibold">软件工程师</h3>
                                <p class="text-purple-600">某科技创业公司</p>
                            </div>
                            <span class="text-gray-500">2018.07 - 2021.02</span>
                        </div>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>参与公司主要产品的开发，负责前端架构搭建</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>优化数据库查询，将关键接口响应时间降低60%</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>建立代码审查机制，提高团队代码质量</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Project Showcase -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">项目展示</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white rounded-lg overflow-hidden card-hover">
                    <div class="hero-gradient p-4">
                        <h3 class="text-xl font-semibold text-white">电商平台微服务架构</h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">
                            主导设计并实施了电商平台的微服务架构改造，将单体应用拆分为20+微服务，
                            实现了服务的独立部署和弹性伸缩。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Spring Cloud</span>
                            <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Docker</span>
                            <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Kubernetes</span>
                            <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm